<template>
  <div>
    <!-- 地图-->
    <el-dialog
      width="1000px"
      title="地图定位"
      :visible.sync="isShowMap_c"
      append-to-body
      @close="closeMap"
    >
      <div class="search_box">
        <el-form :model="ruleForm">
          <el-input
            placeholder="请输入详细地址搜索"
            maxlength="30"
            v-model="ruleForm.mapAddress"
            autocomplete="off"
            class="search_input"
          ></el-input>
          <div class="lat_lng">
            <span>经度：{{ addressInfo.lng }}</span>
            <span>维度：{{ addressInfo.lat }}</span>
          </div>
        </el-form>
      </div>
      <baidu-map
        v-if="isShowMap_c"
        @click="clickMap"
        :mapClick="false"
        class="bm-view"
        center="杭州"
      >
        <bm-local-search
          :panel="false"
          :keyword="ruleForm.mapAddress"
          :auto-viewport="true"
          :location="location"
        ></bm-local-search>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      </baidu-map>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeMap">取 消</el-button>
        <el-button class="btn-light-blue" @click="confirmMap">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  props: {
    isShowMap: {
      type: Boolean,
      default: false,
    },
    longitude: {
      type: Number,
      default: 30,
    },
    latitude: {
      type: Number,
      default: 120,
    },
    address: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      ruleForm: {
        mapAddress: "",
      },
      location: "杭州",
      addressInfo: {},
      isShowMap_c: false,
    };
  },
  watch: {
    isShowMap(val) {
      this.isShowMap_c = val;
      this.addressInfo = {
        lng: this.longitude,
        lat: this.latitude,
        address: this.address,
      };
      this.ruleForm.mapAddress = this.address;
    },
  },
  methods: {
    // 点击地图，获取地图坐标信息
    clickMap(e) {
      this.addressInfo = {
        lng: e.point.lng,
        lat: e.point.lat,
        address: this.ruleForm.mapAddress,
      };
    },
    // 关闭地图
    closeMap() {
      this.$parent.closeMap();
    },
    // 确定定位
    confirmMap() {
      this.$parent.setAddress(this.addressInfo);
      this.$parent.closeMap();
    },
  },
};
</script>

<style lang="less" scoped>
/* 地图经纬度 */
.bm-view {
  width: 960px;
  height: 450px;
}
.search_box {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search_input {
    width: 640px;
  }
  .lat_lng {
    width: 300px;
    display: initial;
    span {
      width: 150px;
      margin-left: 40px;
    }
  }
}
.address_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
